<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动场景1：图片与文字环绕</title>
		<style>
			img{
				/* 图片脱离文档流--文字包含在图片周边 */
				float: left;
				margin-right: 50px;/*图片与文字链接处间隙*/
				margin-bottom: 50px;/*图片与文字链接处间隙*/                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
			}
			p{
				font-size: 16px;/*页面默认字体尺寸*/
				line-height: 20px; /*浮动文字，行高无法设定*/
				word-spacing: 20px;
			}
		</style>
	</head>
	<body>
		<h1>浮动之图片文字环绕</h1>
		<img src="img/4.png" alt="碧琪" width="250px" height="250px">
		<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias nisi quisquam sit asperiores. Optio enim, veniam quam facilis deleniti, necessitatibus voluptatum ut voluptas maiores quaerat recusandae. Natus quaerat quas veniam.  Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium eum incidunt voluptas, tempore totam sint aut nam soluta dolore nisi earum voluptate. Commodi error neque exercitationem architecto? Ad, magni error.  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint officia architecto accusantium perferendis in excepturi. Perspiciatis, nihil et? Atque expedita vitae accusamus unde quo dolores ex maiores quam accusantium tempore.</p>
		
		
	</body>
</html>